<template>
	<view class="top-info">
		已预约车辆：<text>{{pendingNum}}</text>
	</view>
	<cl-page :padding="20">
		<view class="page" v-if="code && list.length > 0">
			<view class="list-card" @click="gotoEnter(item._id)" v-for="(item,index) in list" :key="index">
				<cl-list-item label="货主名称">{{item.owner_name}}</cl-list-item>
				<view class="list-item">
					<text class="list-item-lable">车牌号</text>
					<text class="list-item-value">{{item.plate_number}}</text>
				</view>
				<view class="list-item">
					<text class="list-item-lable">车辆型号</text>
					<text class="list-item-value">{{item.vehicle_model}}</text>
				</view>
				<view class="list-item">
					<text class="list-item-lable">司机号码</text>
					<text class="list-item-value">{{item.driver_number}}</text>
				</view>
				<view class="list-item">
					<text class="list-item-lable">货品</text>
					<text class="list-item-value">{{item.goods}}</text>
				</view>
				<view class="list-item">
					<text class="list-item-lable">预计到达时间</text>
					<text class="list-item-value">{{item.estimated_time_of_arrival}}</text>
				</view>
				<view class="list-item">
					<text class="list-item-lable">更新时间</text>
					<text class="list-item-value">{{dateFormat(item.updated_time)}}</text>
				</view>
				<view class="list-item" v-if="item.appoint_status === '已预约'">
					<text class="list-item-lable">当前排队号码</text>
					<text class="list-item-value">{{item.appoint_index}}</text>
				</view>
				<view class="list-item">
					<view class="list-item-lable">状态</view>
					<view class="list-item-value" v-if="item.state === '运输中'" style="">
						运输中
					</view>
					<view class="list-item-value" v-if="item.state === '已到达'" style="color:#ff0000">
						已到达
					</view>
					<view class="list-item-value" v-if="item.state === '正在卸车'" style="color:#ffaa00">
						正在卸车
					</view>
					<view class="list-item-value" v-if="item.state === '卸车完成'" style="color:#005500">
						卸车完成
					</view>
				</view>
				<view class="list-item" @click.stop style="width: 100%;" v-if="isAdmin">
					<cl-button v-if="item.state === '运输中'" color="#ff0000" style="width: 100%;" round fill
						@click="changeState('已到达', item)">已到达</cl-button>
					<cl-button v-if="item.state === '已到达'" color="#ffaa00" style="width: 100%;" round fill
						@click="changeState('正在卸车', item)">正在卸车</cl-button>
					<cl-button v-if="item.state === '正在卸车'" color="#005500" style="width: 100%;" round fill
						@click="changeState('卸车完成', item)">卸车完成</cl-button>
				</view>
				<view class="list-item" @click.stop style="width: 100%;display: flex;">
					<cl-button v-if="item.state === '运输中'" @click="deleteHandle(item)" style="width: 100%;" round fill
						background-color="#ff0000" color="#fff">删除</cl-button>
					<cl-button v-if="isCanFallback(item.state)" @click="fallbackHandle(item)" style="width: 100%;" round
						fill background-color="#ffaa00" color="#fff">回退</cl-button>
				</view>
			</view>
		</view>
		<view v-else-if="!code" class="empty">
			请先返回首页登录哟！
			<cl-button color="#fff" class="empty-btn" @click="gotoIndex" background-color="#008c8c">返回首页</cl-button>
		</view>
		<view v-else class="empty">
			暂无数据！
		</view>
		<cl-button v-if="code" size="large" round fill @tap="gotoEnter()" color="#fff" class="footer"
			background-color="#008c8c" :style="{bottom: isIphone ? '198rpx' : '130rpx'}">
			新增信息
		</cl-button>
		<tabbar :code="code" />
	</cl-page>
</template>
<script lang="ts" setup>
	import Tabbar from "./components/tabbar.vue";
	import { ref } from 'vue';
	import { useCool } from "/@/cool";
	import { onShow } from "@dcloudio/uni-app";
	import { onLoad } from "@dcloudio/uni-app";
	import { useUi } from "/$/cool-ui";
	import dayjs from "dayjs";
	import { onPullDownRefresh } from "@dcloudio/uni-app";
	const list = ref<any[]>([])
	const isAdmin = ref(false)
	const { storage } = useCool()
	const db = uniCloud.importObject('cc_enter') //第一步导入云对象
	const ui = useUi()
	const getList = async () => {
		if (code.value === "admin") {
			const { data } = await db.list({})
			list.value = data || []
			const { total = 0 } = await db.pendingNum()
			pendingNum.value = total
		} else {
			const { data } = await db.list({ code: code.value })
			list.value = data || []
		}
	}
	const changeState = async (state : any, item : any, isFallBack = false) => {
		if (!isFallBack) {
			ui.showConfirm({
				title: '再次确认',
				message: "确认更改状态？",
				callback: async (action) => {
					if (action === 'cancel') {
						return
					} else {
						await db.changeState({ state, _id: item._id, isFallBack })
						getList()
					}
				}
			})
		} else {
			await db.changeState({ state, _id: item._id, isFallBack })
			getList()
		}
	}

	const gotoEnter = (id ?: any) => {
		if (id) {
			uni.navigateTo({
				url: `enter?id=${id}`,
			});
		} else {
			uni.navigateTo({
				url: `enter`,
			});
		}
	};
	const gotoIndex = () => {
		uni.switchTab({
			url: `index`,
		});
	};
	const code = ref('')
	const isIphone = ref(false)
	const pendingNum = ref<any>(0)
	const isCanFallback = (state : any) => {
		return ['已到达', '正在卸车', '卸车完成'].includes(state)
	}
	const dateFormat = (date : any) => {
		return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
	}
	const fallbackHandle = (item : any) => {
		ui.showConfirm({
			title: '再次确认',
			message: "确认回退？",
			callback(action) {
				if (action === 'cancel') {
					return
				} else {

					const state = item.state
					if (state === '卸车完成') {
						changeState('正在卸车', item, true)
					}
					if (state === '正在卸车') {
						changeState('已到达', item, true)
					}
					if (state === '已到达') {
						changeState('运输中', item, true)
					}
				}
			}
		})
	}
	const deleteHandle = async (item : any) => {
		ui.showConfirm({
			title: '再次确认',
			message: "确认回退？",
			callback: async (action) => {
				if (action === 'cancel') {
					return
				} else {
					const { code } = await db.delete(item._id)
					if (code === 200) {
						ui.showToast("删除成功！")
						getList()
					}
				}
			}
		})

	}
	onLoad(() => {
		uni.getSystemInfo({
			success: res => {
				let model = res.model;
				if (model?.includes?.('iPhone')) {
					isIphone.value = true;
				} else {
					isIphone.value = false;
				}
			}
		})
	})
	onPullDownRefresh(() => {
		getList()
		setTimeout(() => {
			uni.stopPullDownRefresh(); // 停止下拉刷新
		}, 1000);
	})
	onShow(async () => {
		code.value = storage.get("code");
		if (!code.value) {
			if (storage.get('uni_id_token')) {
				const uniIdCo = uniCloud.importObject('uni-id-co')
				uniIdCo.refreshToken()
				const res = await uniIdCo.getAccountInfo()
				code.value = res.data.username || ''
			}
		}
		if (code.value) {
			if (code.value === "admin") {
				const { data } = await db.list({})
				isAdmin.value = true
				list.value = data || []
				const { total = 0 } = await db.pendingNum()
				pendingNum.value = total

			} else {
				const { data } = await db.list({ code: code.value })
				list.value = data || []
			}
		}
	})
</script>
<style scoped lang="scss">
	.page {
		padding-bottom: 200rpx;
	}

	.top-info {
		position: sticky;
		top: 0px;
		background-color: #fff;
		font-size: 14px;
		line-height: 30px;
		z-index: 999;
		padding: 0 40rpx;

		text {
			color: #008c8c;
		}
	}

	.list-card {
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		padding: 0 10rpx 10rpx;
		margin-bottom: 20rpx;

	}

	.list-item {
		display: flex;
		padding: 10rpx;
		justify-content: space-between;
		font-size: 24rpx;

		:deep .cl-radio.is-checked .cl-radio__input {
			background-color: #008c8c;
			color: #008c8c;
		}

	}

	.list-item-lable {
		color: #c2c2c2;
	}

	.list-item-value {
		color: #2c2c2c;
		font-size: 28rpx;
	}

	.empty {
		/* background-color: #fff; */
		padding-top: 400rpx;
		display: flex;
		flex-direction: column;
		/* 		justify-content: center; */
		align-items: center;
		color: #b2b2b2;
	}

	.empty-btn {
		margin-top: 20rpx;
	}

	.footer {
		position: fixed;
		width: calc(100% - 40rpx);
	}
</style>